<template>
	<div class="moblie-search">
		<div class="search">
			<router-link to="/moblie/home">
				<img src="../../assets/img/mobile/返回.png">
			</router-link>

			<form @submit.prevent="setSearch()">
				<input type="search" placeholder="请输入书名,作者,出版社" required v-model="keywords" />
				<input type="submit" value="搜索" @click="booksos()" />
			</form>
		</div>
		<div class="books" v-for="(item,i) in books" :key="i">
			<router-link :to="`/moblie/bookdetail/${item.id}`">
				<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" >
				<div class="bookxianq">
					<p>{{item.name}}</p>
					<p>{{item.author}}</p>
					<p>{{item.maker}}</p>
				</div>
			</router-link>
		</div>
		<div class="del" v-show="hlist!=''">
			<h3>历史搜索</h3>
			<button @click="del()">
				<img src="../../assets/img/mobile/删除.png">
			</button>
		</div>

		<div class="history">
			<span v-for="(item,i) in hlist" :key="i">
				<a @click="btn(item)">{{item}}</a>
			</span>
		</div>
		<div class="hotlist">
			<h3>热门搜索</h3>
			<span v-for="(item,i) in hotlist" :key="i">
				<a @click="btn(item.name)">{{item.name}}</a>
			</span>
		</div>
		<div class="bookone">
			<div class="booklist" v-for="(item,i) in booklist" :key="i">
				<h2>{{item.name}}</h2>
				<div class="book" v-for="(book,index) in book" :key="index">
					<router-link :to="`/moblie/bookdetail/${book.id}`">
						<img v-show="index<3" :src="`http://127.0.0.1/api/public/showimg/${book.pic}`">
						<div>
							<p>{{book.name}}</p>
							<p>新书￥{{book.price}}起</p>
						</div>
					</router-link>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	//导入vuex的对象
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		name: 'MoblieSearch',
		data() {
			return {
				keywords: '',
				hotlist: [],
				booklist: [{
						id: 1,
						name: '孔网畅销榜单',
					},
					{
						id: 2,
						name: '热度飙升榜',
					}
				],
				book: [],
				book2:[],
				books: [],
				hoverIndex: -1,
				total: 0,
				start: 1,
				num: 6,
				types: [],
				searchStr: '',
				onType: -1,
				typeid: -1,
			}
		},
		computed: {
			...mapState('search', ['hlist']),
		},
		methods: {
			//格式：mapActions('模块名',['调用模块内的方法'])
			...mapActions('search', ['actionHistory']),
			...mapActions('search', ['del']),
			setSearch() {
				console.log(1);
				//调用search模块的函数actionHistory；并将当前组件的data数据传递过去vuex
				let cs = this.hlist.some(item => item === this.keywords);
				if (!cs) {
					this.actionHistory(this.keywords);
					this.keywords = '';
				} else {
					let i = this.hlist.indexOf(this.keywords);
					this.hlist.splice(i, 1);
					this.hlist.unshift(this.keywords)
				}
			},
			booksos(){
				this.total = 0;
				this.start = 1;
				this.onType = -1;
				let bookkey = new FormData();
				bookkey.append("key", this.keywords);
				this.$axios.post("http://127.0.0.1/api/public/book/findPageKey/" + this.start + "/" + this.num,bookkey
				).then(resp => {
					this.books = resp.data.data.books;
					this.total = resp.data.data.total;
					console.log("total=" + this.total);
					console.log(this.books);
				})
			},
			hotbook(){
				let token = localStorage.getItem('token');
				this.$axios.get("http://127.0.0.1/api/public/book/findTopSale/5",{
					headers:{
						'Authorization':`Bearer ${token}`
					}
				}).then((resp)=>{
					resp.data.data.forEach((item)=>{
						this.hotlist.push(item);
						console.log(this.hotlist);
					})
					console.log()
				})
			},
			del() {
				this.$store.commit('search/del');
			},
			btn(item) {
				this.keywords = item;
			},
			getbooksale() {
				this.$axios.get("http://127.0.0.1/api/public/book/findTopSale/6").then((resp) => {
					resp.data.data.forEach((item) => {
						this.book.push(item);
					})
					console.log(this.book);
				})
			},
			findBook() {
				this.$axios.get("http://127.0.0.1/api/public/findPageBook/1/6/0").then((resp) => {
					this.book2=resp.data.data.books;
					console.log('1');
					console.log(this.book2);
					console.log('2');
				})
			},
		},
		mounted() {
			this.getbooksale();
			this.hotbook();
			this.findBook();
		}
	}
</script>

<style scoped>
	.moblie-search {
		width: 100%;
		height: 100%;
		background-color: #f5d5a0;
	}
	.moblie-search .books img{
		width: 10rem;
	}
	.moblie-search .books a{
		display: flex;
		color: black;
		margin-top: 0.2rem;
	}
	.moblie-search .search img {
		width: 2rem;
		margin-top: 0.1rem;
	}

	.moblie-search .search {
		display: flex;
		justify-content: space-between;
		background-color: #a68b5b;
	}

	.moblie-search .search input[type="search"] {
		width: 16rem;
		height: 2rem;
		margin-right: 2rem;
		border-radius: 1rem;
		margin-top: 0.2rem;
		border: none;
		outline: none;
	}

	.moblie-search .search input[type="submit"] {
		margin-right: 1rem;
		border: none;
		border-radius: 1rem;
		background-color: #a68b5b;
		color: white;
	}

	.moblie-search .del {
		display: flex;
		justify-content: space-between;
		margin-top: 1.5rem;
		background-color: #f5d5a0;
	}

	.del button {
		border: none;
		background-color: #f5d5a0;
	}

	.moblie-search .del img {
		width: 1.5rem;
		border: none;
	}

	.moblie-search .history {
		background-color: #f5d5a0;
	}

	.moblie-search span {
		display: block;
		display: inline-block;
		height: 2rem;
		background-color: lightgray;
		border-radius: 0.5rem;
		margin: 0.3rem;
		word-wrap: break-word;
		line-height: 2rem;
	}

	.moblie-search .bookone {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.moblie-search .bookone .booklist {
		flex: 0 0 auto;
		border-radius: 1rem;
		width: 15rem;
		margin: 1rem;
		background-color: #6495ED;
	}

	.moblie-search .bookone .booklist h2 {
		background-color: #ffdbb7;
		border-radius: 1rem;
		height: 3rem;
		color: red;
	}

	.moblie-search .bookone .booklist .book {
		display: flex;
		margin-left: 1rem;
		margin-top: 1rem;
	}

	.moblie-search .bookone .booklist .book a {
		color: black;
	}

	.moblie-search .bookone .booklist img {
		width: 30%;
		border-radius: 0.5rem;
	}
</style>
